<script setup lang="ts">
import type { Image, TreeNode } from './types'; // 假设你将类型定义放在了单独的文件中

import { ref } from 'vue';

import ACard from 'ant-design-vue/lib/card';
import ACol from 'ant-design-vue/lib/col';
// 引入 Ant Design Vue 组件
import AModal from 'ant-design-vue/lib/modal';
import APagination from 'ant-design-vue/lib/pagination';
import ARow from 'ant-design-vue/lib/row';
import ATree from 'ant-design-vue/lib/tree';

// 定义常量和响应式变量
const title = '上传商品图';
const visible = ref(false);

// 树形数据结构
const treeData = ref<TreeNode[]>([
  {
    title: '全部图片',
    key: '0-0',
    children: [
      { title: '商品图片', key: '0-0-0' },
      { title: '远程下载', key: '0-0-1' },
      { title: 'banner头图', key: '0-0-2' },
      { title: '商品分类', key: '0-0-3' },
      { title: '金刚区', key: '0-0-4' },
      { title: '底部Tab', key: '0-0-5' },
      {
        title: '节日图标',
        key: '0-0-6',
        children: [
          { title: '2024国庆', key: '0-0-6-0' },
          { title: '2024双11', key: '0-0-6-1' },
          { title: '2024双12', key: '0-0-6-2' },
        ],
      },
      { title: '会员、分销', key: '0-0-7' },
    ],
  },
]);

// 图片列表
const images = ref<Image[]>([]);

// 分页相关
const currentPage = ref(1);
const pageSize = 12;
const totalImages = 9703;

// 事件处理函数
const handleOk = () => {
  console.log('OK');
  visible.value = false;
};

const handleCancel = () => {
  console.log('Cancel');
  visible.value = false;
};

const handleSelect = (selectedKeys: string[], info: any) => {
  console.log('Selected:', selectedKeys, info);
};

const handlePageChange = (page: number) => {
  currentPage.value = page;
  // Fetch images for the new page
  // images.value = fetchImages(page);
};

// 显示模态框
const show = () => {
  visible.value = true;
};
</script>

<template>
  <div class="image-selector">
    <AModal
      :title="title"
      :visible="visible"
      @cancel="handleCancel"
      @ok="handleOk"
    >
      <ATree
        :block-node="true"
        :show-line="true"
        :tree-data="treeData"
        @select="handleSelect"
      />
      <div class="image-preview">
        <ARow :gutter="16">
          <ACol v-for="(image, index) in images" :key="index" :span="6">
            <ACard :cover="image.url">
              <template #title>
                <span>{{ image.name }}</span>
              </template>
            </ACard>
          </ACol>
        </ARow>
        <APagination
          :current="currentPage"
          :page-size="pageSize"
          :total="totalImages"
          @change="handlePageChange"
        />
      </div>
    </AModal>
  </div>
</template>

<style scoped>
.image-selector {
  max-width: 800px;
  margin: 0 auto;
}

.image-preview {
  margin-top: 16px;
}

a-card {
  text-align: center;
}
</style>
